<template>
  <div class="userLogin">
    <!-- 头部NavBar -->
    <div class="navBarBox">
      <LoginTitleNavbar />
    </div>
    <!-- 登录表单 -->
    <div class="login_from">
      <p class="title">欢迎使用博册App</p>
      <p class="subhead">网上学习，方便快捷</p>
      <!-- 账号登录 -->
      <van-form @submit="onSubmit" v-if="activeName === 'account'">
        <van-cell-group inset>
          <van-field
            v-model="state.user_name"
            name="user_name"
            placeholder="请输入您的账号"
            :rules="[
              {
                required: true,
                pattern: pattern.name,
                message:
                  '请填写只含有汉字、数字、字母、下划线不能以下划线开头和结尾的2~10个字符的账号',
              },
            ]"
          />
          <van-field
            v-model="state.user_password"
            type="password"
            name="user_password"
            placeholder="请输入密码"
            :rules="[
              {
                required: true,
                pattern: pattern.password,
                message: '请填写含大小写字母及数值内的3~10个字符的密码',
              },
            ]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
        <div class="tab">
          <a
            v-if="activeName === 'account'"
            :class="{ active: activeName === 'mobile' }"
            @click="activeName = 'mobile'"
            href="javascript:"
            >注册</a
          >
          <span>忘记密码</span>
        </div>
      </van-form>
      <!-- 验证码登录 -->
      <van-form @submit="onSubmit" v-if="activeName === 'mobile'">
        <van-cell-group inset>
          <van-field
            v-model="state.user_name"
            name="user_name"
            placeholder="请输入昵称"
            :rules="[
              {
                required: true,
                pattern: pattern.name,
                message:
                  '请填写只含有汉字、数字、字母、下划线不能以下划线开头和结尾的2~10个字符的昵称',
              },
            ]"
          />
          <van-field
            v-model="state.user_password"
            name="user_password"
            placeholder="请输入密码"
            :rules="[
              {
                required: true,
                pattern: pattern.password,
                message: '请填写含大小写字母及数值内的3~10个字符的密码',
              },
            ]"
            class="code"
          />
          <van-field
            v-model="state.user_mobile"
            name="user_mobile"
            placeholder="请输入手机号"
            :rules="[
              {
                required: true,
                pattern: pattern.mobile,
                message: '请填写正确手机号',
              },
            ]"
          />
          <!-- <span class="send">发送验证码</span> -->
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
        <div class="tab">
          <a
            v-if="activeName === 'mobile'"
            :class="{ active: activeName === 'account' }"
            @click="activeName = 'account'"
            href="javascript:"
            >账号登录</a
          >
          <span>新用户自动注册</span>
        </div>
      </van-form>
    </div>
    <!-- 第三方登录 -->
    <div class="thirdparty">
      <!-- <van-divider>第三方登录</van-divider> -->
    </div>
    <div class="agree">
      <van-field name="checkbox">
        <template #input>
          <van-checkbox v-model="checked"
            ><span>我已阅读并同意</span>
            <a href="javascript:">《隐私条款》</a>
            <span>和</span>
            <a href="javascript:">《服务条款》</a></van-checkbox
          >
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import LoginTitleNavbar from "./LoginTitleNavbar.vue";
import { getLogin, getRegister } from "../../../api/user";
import { Toast } from "vant";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "UserLogin",
  components: { LoginTitleNavbar },
  setup() {
    //登录或注册切换
    const activeName = ref("account");
    //表单校验
    const pattern = reactive({
      name: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{2,10}$/,
      password: /^[a-zA-Z0-9]{3,10}$/,
      mobile: /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
    });
    //表单字段
    const state = reactive({
      user_name: "",
      user_password: "",
      user_mobile: "",
    });
    // 复选框
    const checked = ref(false);
    const { getLoginMag, getRegisterMag } = handleGetLogin();
    //登录或注册
    const onSubmit = (params) => {
      // console.log("submit", params);
      if (checked.value == false) return Toast("请阅读并同意底部协议");
      //注册
      if (params.user_mobile) {
        getRegisterMag(params);
      } else {
        //  登录
        getLoginMag(params);
      }
      // state.user_mobile=state.user_password=state.user_name=''
    };
    return {
      activeName,
      pattern,
      state,
      onSubmit,
      checked,
    };
  },
};
function handleGetLogin() {
  const store = useStore();
  const router = useRouter();
  //登录
  const getLoginMag = (params) => {
    getLogin(params).then((res) => {
      // console.log(res);
      if (res.status == 200) {
        store.commit("user/setUser", res.data);
        store.commit("user/setToken", res.token);
        router.push("/user");
      }
    });
  };
  //注册
  const getRegisterMag = (params) => {
    getRegister(params).then(() => {
      // console.log(res);
      //注册后直接登录
      getLoginMag({
        user_name: params.user_name,
        user_password: params.user_password,
      });
    });
  };
  return { getLoginMag, getRegisterMag };
}
</script>

<style lang="less" scoped>
.userLogin {
  padding-top: 2.5rem;
  box-sizing: border-box;
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
// 头部NavBar
.navbarBox {
  width: 100%;
  height: 2.6rem;
}
// 登录表单
.login_from {
  text-align: center;
  // 标题
  .title {
    color: #6e7583;
    font-size: 1.4rem;
    letter-spacing: 0.05rem;
  }
  // 副标题
  .subhead {
    font-size: 0.8rem;
    color: #a8a8a8;
    letter-spacing: 0.05rem;
  }
  // 表单
  .van-form .van-cell-group {
    margin-top: 3rem;
    margin-left: 2rem;
    overflow: hidden;
  }
  // 按钮
  .van-button {
    width: 90%;
    margin: 2rem auto 1rem;
    background-color: #fff;
    border: 1px solid;
    color: sandybrown;
    font-size: 1.3rem;
    letter-spacing: 9px;
  }
  .van-field {
    margin-bottom: 1rem;
    border-bottom: 0.001rem solid #e1e1e1;
  }
  /deep/ .van-field__body {
    font-size: 0.9rem;
  }
  .tab {
    display: flex;
    justify-content: space-around;
    font-size: 0.9rem;
    margin-top: 1.3rem;
    color: #54575c;
    a {
      color: #54575c;
    }
  }
}
.agree {
  // margin-left: 2rem;
  position: absolute;
  bottom: 4rem;
  left: 2rem;
  :deep(.van-checkbox__label) {
    color: #969799;
  }
}
</style>
